<template>
  <div style="text-align: center; width: 680px; margin: auto; background: #fff">
    <table
        cellpadding="0"
        cellspacing="0"
        style="
        table-layout: fixed;
        position: relative;
        width: 95%;
        font-family: 仿宋_GB2312;
        font-size: 16px;
        margin: auto;
      "
    >
      <tr style="height: 10px">
        <td
            v-for="item in 100"
            :key="item"
            style="width: 1%; text-align: center"
        />
      </tr>
      <tr style="height: 60px">
        <td colspan="100" style="text-align: center">
          <span id="Lab_title" style="font-size: 24px; font-weight: bold"
          >水利水电工程施工企业安全生产管理人员<br/>考核合格证书个人变更申请表</span
          >
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="14" class="TableBorderOther">姓名</td>
        <td colspan="14" class="TableBorderOther">
          <input
              :disabled="disabled"
              v-model.trim="tempFormData.name"
              type="text"
              class="input-center"
          />
        </td>
        <td colspan="14" class="TableBorderOther">性别</td>
        <td colspan="14" class="TableBorderOther">
          <Aselect
              :disabled="disabled"
              v-model="tempFormData.sex"
              :options="$dict('sex').list()"
              placeholder=""
          />
        </td>
        <td colspan="14" class="TableBorderOther">职务</td>
        <td colspan="14" class="TableBorderOther">
          <input
              :disabled="disabled"
              v-model.trim="tempFormData.duty"
              type="text"
              class="input-center"
          />
        </td>
        <td colspan="16" rowspan="4" class="TableBorderRight">
          <img
              style="width: 100%; height: 100%"
              :src="tempFormData.idPhoto && tempFormData.idPhoto.thumbnailUri"
              alt=""
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="14" class="TableBorderOther">身份证号</td>
        <td colspan="36" class="TableBorderOther">
          <input
              :disabled="disabled"
              v-model.trim="tempFormData.paperCode"
              type="text"
              class="input-center"
          />
        </td>
        <td colspan="14" class="TableBorderOther">职称</td>
        <td colspan="20" class="TableBorderOther">
          <Cascader
              :disabled="disabled"
              v-model="tempFormData.titleLevel"
              :options="titleLevelDict"
              :filterable="true"
              :change-on-select="true"
              :show-full-levels="false"
              placeholder=""
          ></Cascader>
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="14" class="TableBorderOther">企业名称</td>
        <td colspan="70" class="TableBorderOther">
          <input
              :disabled="disabled"
              v-model.trim="tempFormData.entName"
              type="text"
              class="input-center"/>
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="14" class="TableBorderOther">资质等级</td>
        <td colspan="14" class="TableBorderOther">
          <Aselect
              :disabled="disabled"
              v-model="tempFormData.entLevel"
              :options="entLevelDict"
              placeholder=""></Aselect>
        </td>
        <td colspan="20" class="TableBorderOther">管理人员类别</td>
        <td colspan="36" class="TableBorderOther">
          <Aselect
              :disabled="disabled"
              v-model="tempFormData.safeTypeCode"
              :options="safeTypeDict"
              @change="safeTypeChange"
              placeholder=""
          />
        </td>

      </tr>
      <tr style="height: 50px">
        <td colspan="14" class="TableBorderBottom">证书编号</td>
        <td colspan="42" class="TableBorderBottom">
          <input
              :disabled="disabled || autoInput"
              v-model.trim="tempFormData.certNumCode"
              type="text"
              class="input-center"
          />
        </td>
        <td colspan="22" class="TableBorderBottom">发证日期</td>
        <td colspan="22" class="TableBorderRightBottom">
          <AdatePicker
              :disabled="disabled || autoInput"
              v-model="tempFormData.issuDate"
              placeholder=""
          />
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import Aselect from '@/components/Select/Aselect';
import AdatePicker from '@/components/TimePicker/AdatePicker';
import safeTypeDict from '@/assets/js/safeTypeDict.js';
import titleLevelDict from "@/assets/js/titleLevelDict";
import { fieldsValidate } from '@/utils/validate.js';
import Cascader from "@/components/Select/Cascader";
import businessApi from '@/api/business';
import {decrypt} from "@/utils/sms4util";
export default {
  props: {
    formData: {
      type: Object,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  components: { Aselect, Cascader, AdatePicker },
  data() {
    return {
      dialogVisible: false,
      checkValue1: '111',
      checkValue2: 1,
      idCode: '',
      sexCode: '',
      tempFormData: {},
      autoInput: true,
      entLevelDict: safeTypeDict.entLevel,
      safeTypeDict: safeTypeDict.safeType,
      titleLevelDict: titleLevelDict.titleLevel,
    };
  },

  watch: {
    formData: {
      handler(val) {
        this.tempFormData = val || {};
        if (this.tempFormData.paperType === '111') {
          this.idCode = this.tempFormData.paperCode;
          this.sexCode = val?.sex;
        }
      },
      immediate: true,
    },
    checkValue1: {
      handler(val) {
        this.tempFormData.paperType = val;
      },
      immediate: true,
    },
    checkValue2: {
      handler(val) {
        this.tempFormData.bgType = val;
        if (val === 2) {
          this.tempFormData.oldName = this.tempFormData.oldName || this.oldUnitName ;
          this.tempFormData.employUnitOld = '';
          this.tempFormData.employUnitNew = '';
          this.tempFormData.creditCodeNew = '';
          this.tempFormData.employAddressNew = '';
          this.tempFormData.employRegistPlaceNew = '';
          this.tempFormData.jbrTelNew = '';
        } else {
          this.tempFormData.oldName = '';
          this.tempFormData.newName = '';
          this.tempFormData.employUnitOld = this.tempFormData.employUnitOld || this.oldUnitName;
        }
      },
      immediate: true,
    },
  },
  methods: {
    checkValue2Change(value) {
      this.checkValue2 = value;
    },

    // 安管人员类型变更
    safeTypeChange(val) {
      const params = {
        type: 'c',
        userId: this.userId || this.$store.state.user.userInfo.id,
        safeTypeCode: val,
      };
      this.$emit('loading',true);
      businessApi.getOldCertInfo(params).then((res) => {
        const mwrCert = businessApi.getCertInfoFromMwr(val);
        if (res) {
          this.tempFormData = Object.assign({},
              businessApi.ignoreEmpty(this.tempFormData),
              businessApi.ignoreEmpty({
                ...res,
                paperCode: res.paperCode ? decrypt(res.paperCode) : undefined,
                sqrTel: res.sqrTel ? decrypt(res.sqrTel) : undefined,
                jbrTel: res.jbrTel ? decrypt(res.jbrTel) : undefined,
                phone: res.phone ? decrypt(res.phone) : undefined,
              }),
              businessApi.ignoreEmpty(this.formData));
          this.tempFormData.safeTypeCode = val;
          this.tempFormData.izStock = null;
        }
        if (mwrCert) {
          this.tempFormData = Object.assign({},
              businessApi.ignoreEmpty(this.tempFormData),
              businessApi.ignoreEmpty(mwrCert),
              businessApi.ignoreEmpty(this.formData));
          this.tempFormData.safeTypeCode = val;
          if (!res) {
            this.tempFormData.izStock="true";
          }
        }
        if (!res && !mwrCert) {
          this.autoInput = false;
          // 暂时停用，后期恢复
          // this.$message.warning('未查询到该安管人员的证书信息，无法进行延续操作');
          // this.tempFormData.titleLevel = null;
          // this.tempFormData.duty = null;
          // this.tempFormData.certNumCode = null;
          // this.tempFormData.issuDate = null;
          // this.tempFormData.entName = null;
          // this.tempFormData.entLevel = null;
          // this.tempFormData.safeTypeCode = null;
        }

      }).finally(()=>{
        this.$emit('loading', false);
      });

    },
    validateFields() {
      const rules = {
        sex: [
          { required: true, text: '请选择性别' },
        ],
        duty: [
          { required: true, text: '请输入职务' },
          {
            maxLength: 128,
            text: '职务长度应小于128位',
          },
        ],
        paperCode: [
          { required: true, text: '请输入身份证号' },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            text: '请输入正确格式的身份证号码',
          },
        ],
        entName: [
          { required: true, text: '请输入企业名称' },
          {
            maxLength: 256,
            text: '企业名称长度应小于256位',
          },
        ],
        entLevel: [
          { required: true, text: '请选择资质等级' },
        ],
        safeTypeCode: [
          { required: true, text: '请选择管理人员类别' },
        ],
        certNumCode: [
          { required: true, text: '请输入证书编号' },
          {
            maxLength: 50,
            text: '证书编号长度应小于50位',
          },
        ],
        titleLevel: [
          { required: true, text: '请选择职称' },
        ],
        issuDate: [
          { required: true, text: '请选择发证日期' },
        ],
      };
      return fieldsValidate(this.tempFormData, rules, this);
    },
    idCardChecked() {
      this.checkValue1 = this.checkValue1 === '111' ? undefined : '111';
      this.tempFormData = {
        ...this.tempFormData,
        paperCode: this.idCode,
      };
    },
    validateForm() {
      const idReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (
          this.tempFormData.paperType === '111' &&
          !idReg.test(this.tempFormData.paperCode)
      ) {
        this.$message.error('请输入正确的身份证号码');
        return false;
      }
      return this.validateFields(this.checkValue2);
    },
  },
};
</script>
<style lang="scss" scoped>
@import '../../../../../../../assets/styles/word.scss';
</style>
